<template>
  <div class="rule-box">
    <el-dialog width="500px" title="配置提现规则" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules">
        <el-form-item label="分销商单笔提现设置">
          <div class="item-box">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="minFee" label="最小值">
                  <el-input style="width:90%;" v-model="dialogForm.minFee" placeholder="请输入">
                    <template #append>元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="maxFee" label="最大值">
                  <el-input style="width:90%;" v-model="dialogForm.maxFee" placeholder="请输入">
                    <template #append>元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item label="分销商单日提现设置">
          <div class="item-box">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="totalFeeLimit" label="提现总额度">
                  <el-input style="width:90%;" v-model="dialogForm.totalFeeLimit" placeholder="请输入">
                    <template #append>元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="totalCountDay" label="最大笔数">
                  <el-input style="width:90%;" v-model="dialogForm.totalCountDay" placeholder="请输入">
                    <template #append>笔</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item label="分销商提现手续费设置">
          <div class="item-box">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="serviceFeeDiscountAli" label="支付宝提现手续费">
                  <el-input style="width:90%;" v-model="dialogForm.serviceFeeDiscountAli" placeholder="请输入">
                    <template #append>千分之</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="serviceFeeDiscountWx" label="微信提现手续费">
                  <el-input style="width:90%;" v-model="dialogForm.serviceFeeDiscountWx" placeholder="请输入">
                    <template #append>千分之</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="postRuleAllSet">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { computed, reactive, ref, toRefs } from 'vue'
import { successDeal, warningDeal } from '@/utils/utils'
import api from '../api'
export default {
  setup() {
    const dialogFormRef = ref(null)

    const state = reactive({
      dialogFormVisible: false,
      dialogForm: {},
      dialogFormRules: {
        minFee: [
          { required: true, message: '请输入最小值', trigger: 'blur' },
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输入大于等于0的数字', trigger: 'blur'
          },
        ],
        maxFee: [
          { required: true, message: '请输入最大值', trigger: 'blur' },
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输入大于等于0的数字', trigger: 'blur'
          },
        ],
        totalFeeLimit: [
          { required: true, message: '请输入提现总额度', trigger: 'blur' },
          {
            pattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/, message: '请输入大于等于0的数字', trigger: 'blur'
          },
        ],
        totalCountDay: [
          { required: true, message: '请输入最大笔数', trigger: 'blur' },
          {
            pattern: /^[1-9]\d*$/, message: '请输入大于0的整数', trigger: 'blur'
          },
        ],
        serviceFeeDiscountAli: [
          { required: true, message: '请输入最大笔数', trigger: 'blur' },
          {
            pattern: /^[0-9]\d*$/, message: '请输入大于等于0的整数', trigger: 'blur'
          },
        ],
        serviceFeeDiscountWx: [
          { required: true, message: '请输入最大笔数', trigger: 'blur' },
          {
            pattern: /^[0-9]\d*$/, message: '请输入大于等于0的整数', trigger: 'blur'
          },
        ],
      },
      userInfo: computed(() => {
        return JSON.parse(window.localStorage.getItem('USER_INFO'))
      })
    })

    function dialogClose() {
      dialogFormRef.value.resetFields()
    }

    function dialogShow() {
      getDetail()
      state.dialogFormVisible = true
    }

    function getDetail() {
      const obj = {
        shopId: state.userInfo && state.userInfo.companyId
      }
      api.ruleAllGet(obj).then(res => {
        if (res.code == '200') {
          state.dialogForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function postRuleAllSet() {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          const obj = {
            ...state.dialogForm,
            shopId: state.userInfo.companyId
          }
          api.ruleAllSet(obj).then(res => {
            if (res.code == '200') {
              successDeal(res.msg)
              state.dialogFormVisible = false
            } else {
              warningDeal(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      })
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      dialogShow,
      dialogClose,
      postRuleAllSet,
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
  padding: 0 20px !important;
}
.item-box {
  background-color: rgba($color: #0081ff, $alpha: 0.1);
  box-sizing: border-box;
  padding: 20px;
}
</style>